<template>
    <div class="container white">
        <div class="space-m"></div>
        <div class="top-list">
            <div class="report-list">
                <div class="report-list-header">
                    <span class="icon-line"><strong>|</strong></span>
                    <span class="header-title">{{title}}</span>
                    <span class="header-all pink">总业绩：{{dataTotal}}万</span>
                </div>
                <ul v-if="dataType == 1">
                    <li class="report-li" v-for="(d,index) in dataList"><span class="orange"><span v-if="index <5">Top</span>{{index+1}}</span> {{setWords(d.premisesName)}}<span class="report-result">签约业绩：{{d.dealAmount}}万</span></li>
                </ul>
                <ul v-if="dataType == 2">
                    <li class="report-li" v-for="(d,index) in dataList"><span class="orange"><span v-if="index <5">Top</span>{{index+1}}</span> {{setWords(d.agencyName)}}<span class="report-result">签约业绩：{{d.dealAmount}}万</span></li>
                </ul>

            </div>
        </div>
        <mugen-scroll :handler="getBoardData" :should-handle="!loading" >
        </mugen-scroll>
    </div>
</template>

<script>
    import { Indicator} from 'mint-ui';
    import MugenScroll from 'vue-mugen-scroll'
    export default {
        name: "boss-board-list",
        components: {
            MugenScroll
        },
        data(){
            return{
                beginTime:'',
                endTime:'',
                dimension:'',
                dataType:'',
                title:'',
                dataList:[],
                dataTotal:'0',
                pageNo:0,
                pageSize:20
            }
        },
        mounted(){
            Indicator.close();
            this.beginTime = this.$route.query.beginTime;
            this.endTime = this.$route.query.endTime;
            this.dimension = this.$route.query.dimension;
            this.dataType = this.$route.query.dataType;
            if(this.dataType == 1){
                this.title='楼盘销售业绩';
            }else if(this.dataType == 2){
                this.title = '机构销售业绩';
            }
            // this.getBoardData();
        },
        methods: {
            getBoardData() {
                Indicator.open();
                var _self = this;
                var body = {}
                _self.pageNo = _self.pageNo+1;
                if(_self.pageNo != 1){
                   _self.pageSize = 10;
                }
                var params = {
                    pageNo: _self.pageNo,
                    pageSize: _self.pageSize,
                    beginTime: this.$route.query.beginTime,
                    endTime: this.$route.query.endTime,
                    dimension: this.$route.query.dimension,
                }

                //获取数据
                let dataUrl = ''
                if (this.$route.query.dataType == 1) {
                    //楼盘销售业绩分页列表
                    dataUrl = '/api/houseSalePerformancePageList';
                } else if (this.$route.query.dataType == 2) {
                    //机构销售业绩分页列表
                    dataUrl = '/api/organSalePerformancePageList'
                }

                let url = this.utilHelper.apiUrl + dataUrl;
                body.params = params;
                this.$http.post(url, body).then((response) => {
                    var body = response.body;
                    if (body.result == 1) {
                        let resData = body.resData;
                        let rows = resData.page.rows;
                        if(rows.length == 0 ){
                            Indicator.close();
                            return;
                        }
                        this.dataTotal = resData.totalAmount
                        for(var i=0;i<rows.length;i++){
                            _self.dataList.push(rows[i]);
                        }
                    } else {

                    }
                    Indicator.close();
                })

            },
            setWords(text){
                if(text.length > 15 ){
                    return text.substring(0,15)+'...';
                }else{
                    return text;
                }
            }
        }
    }
</script>

<style scoped>
    .white{background: #fff;}
    .orange{color:#e88037;}
    .gray{color:#999;}
    .pink{color:#FF6A6A}
    .space-m{width: 100%;height: 20px;background:#f8f5f3;}
    .top-list{width:95%;margin: 0 auto;}
    .report-list-header{height: 40px;line-height: 40px;}
    .header-title{color:#e88037;}
    .header-all{float:right;}
    .report-result{float:right;color:#e88037;}
    .report-li{height: 50px;line-height: 49px;border-bottom: 1px solid #e6e6e6;}
    .icon-line{color:#e88037;margin-right: 15px;}
    .fixed-span{width: 50px;text-align: right;display: inline-block;}
</style>